<!--  -->
<template>
  <el-form
    :inline="true"
    label-position="right"
    size="small"
    class="filter-form-inline"
    label-width="100px"
  >
    <el-row
      :gutter="0"
      style="margin-left: 0px; margin-right: 0px"
    >
      <el-col :span="8">
        <el-form-item
          label="流程编号："
          style="width: 100%;"
        >
          {{ detailData.processNo }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="创建时间："
          style="width: 100%;"
        >
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="创建人："
          style="width: 100%;"
        >
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>
      <el-col
        :lg="24"
        :xs="4"
        style="padding-left: 0;padding-right: 0"
      >
        <item-title title="基本信息" />
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item label="简称：">
          <span>{{ detailData?.data?.terminalAlias }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item
          label="所在地区："
          class="item_col"
        >
          <span>{{ detailData?.data?.provinceName }}/{{ detailData?.data?.cityName }}/{{ detailData?.data?.areaName }}</span>
        </el-form-item>
      </el-col>
       <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item
          label="所在街道："
          class="item_col"
        >
          <span>{{ detailData?.data?.streetName }} || 无</span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item label="详细地址：">
          <span>{{ detailData?.data?.address }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item label="属性：">
          <span v-if="detailData?.data?.terminalType === 'first_terminal'">
            {{ getLabel('first_terminal', detailData?.data?.childProperty) }}</span>
          <span v-if="detailData?.data?.terminalType === 'second_terminal'">
            {{ getLabel('second_terminal', detailData?.data?.childProperty) }}</span>
          <span v-if="detailData?.data?.terminalType === 'third_terminal'">
            {{ getLabel('third_terminal', detailData?.data?.childProperty) }}</span>
        </el-form-item>
      </el-col>
      <el-col
        v-if="detailData?.data?.terminalType === 'first_terminal'"
        :lg="8"
        :xs="4"
      >
        <el-form-item label="等级：">
          <span>{{ getLabel('classification_standard', detailData?.data?.terminalLevel) }}</span>
        </el-form-item>
      </el-col>
      <el-col
        v-if="detailData?.data?.terminalType === 'first_terminal'"
        :lg="8"
        :xs="4"
      >
        <el-form-item label="年门诊量：">
          <span>{{ detailData?.data?.cureNum }}</span>万人次
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item label="营销区域：">
          <span>{{ detailData?.data?.saleAreaName }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item label="创建时间：">
          <span> {{ dateFormat("yyyy-mm-dd HH:MM:SS",detailData?.data?.createdAt) }} </span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item
          label="联系人："
          class="item_col"
        >
          <span>{{ detailData?.data?.contacts }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item
          label="联系电话："
          class="item_col"
        >
          <span>{{ detailData?.data?.tel }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :lg="8"
        :xs="4"
      >
        <el-form-item
          label="创建人："
          class="item_col"
        >
          <span>{{ detailData?.data?.creatorName }}</span>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'Index',
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        }
      },
    },
  },
  setup(props) {
    var data = reactive({
      detailData: {},
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(data),
    }
  },
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
